<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型练习</title>
		<style type="text/css">
			body{
				background-image: url(img/zhezhi2.jpg);
			}
			#para01{
				margin: 10px;
				border:1px solid red;
				padding: 3px;
			}
			p#para02{
				margin: 10em;
				border: 1px dashed #f4444;
				padding: 1em;
			}
			
			/*em这里有问题*/
			p#para03{
				margin: 10%;
				border: 1px double  #ff2222;
				padding: 3%;
			}
			/*%和em不可以用来修饰border？*/
			p#para04{
				margin: 1in;
				border: 1in dashed #ff3333;
				padding: .1in;
			}
			#para05{
				margin-top: 5px;
				margin-right: 1em;
				margin-bottom: 20%;
				margin-left: 1.5in;
				
				border-top: 3px double #0000FF;
				border-right:2em groove #008000;
				border-bottom: 1px dotted #BC8F8F;
				border-left:.2in inset #FFFF00;
				
				padding-top: 1em;
				padding-right: 2em;
				padding-bottom: 10px;
				padding-left: 20%;
				
				/*background-color: aqua;
				background: url(img/wf_b.jpg) repeat fixed;*/
				
			}
			
			
			
		</style>
	</head>
	<body>
		<!--<p>para05</p>
		<pre>
				margin-top: 5px;
				margin-right: 1em;
				margin-bottom: 20%;
				margin-left: 1.5in;
				
				border-top: 3px double #0000FF;
				border-right:2em groove #008000;
				border-bottom: 5% dotted #BC8F8F;
				border-left:.2in inset #FFFF00;
				
				padding-top: 1em;
				padding-right: 2em;
				padding-bottom: 10px;
				padding-left: 20%;
				
				background-color: aqua;
				background: url(img/wf_b.jpg) repeat fixed;
		</pre>-->
		<p id="para05">     层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
			（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
			CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
			CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，
			拥有对网页对象和模型样式编辑的能力。
		</p>
		<hr size="7" noshade="noshade" />
		<p>para 1:margin 10px; border 1px solid red;padding 3px</p>
		<p id="para01">     层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
			（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
			CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
			CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，
			拥有对网页对象和模型样式编辑的能力。
		</p>
		<hr size="7" noshade="noshade" />
		<p>para2:margin: 10em;border: 1em dashed #ff1111;padding: 3em;</p>
		<p id="para02">     层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
			（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
			CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
			CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，
			拥有对网页对象和模型样式编辑的能力。
		</p>
		<hr size="7" noshade="noshade" />
		<p>para3 :margin: 10%;border: 5% dashed #ff2222;padding: 3%;</p>
		<p id="para03">     层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
			（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
			CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
			CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，
			拥有对网页对象和模型样式编辑的能力。
		</p>
		<hr size="7" noshade="noshade" />
		<p>para4: margin: 1in;border: 0.1in dashed #ff1111;padding: 1in;</p>
		<p id="para04">     层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML
			（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
			CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
			CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，
			拥有对网页对象和模型样式编辑的能力。
		</p>
		
	</body>
</html>
